<script setup lang="ts">
import { ref, reactive, computed } from 'vue'
import type { FormInstance, FormRules } from 'element-plus'
import { User, Lock } from '@element-plus/icons-vue'
import { ElMessage } from 'element-plus'
import { useRouter } from 'vue-router'
import UserAgreement from './components/UserAgreement.vue'
import PrivacyPolicy from './components/PrivacyPolicy.vue'

const router = useRouter()

interface FormInterface {
  account: string,
  password: string | number
}

const formRef = ref<FormInstance | null>(null)
const formData = ref<FormInterface>({
  account: 'admin',
  password: 'admin123'
})
const formRules = reactive<FormRules<typeof formData>>({
  account: [{ required: true, trigger: 'change', message: '请输入账号' }],
  password: [{ required: true, trigger: 'change', message: '请输入密码' }]
})
const loginLoading = ref(false)
const loginDisabled = computed(() => {
  const { account, password } = formData.value
  if (account && password && isChecked.value) return false
  return true
})
const isChecked = ref(false)

const agreementVisible = ref(false)
const agreementType = ref('1')
const agreementTitle = ref('用户协议')
function onCheckAgreement() {
  agreementType.value = '1'
  agreementVisible.value = true
  agreementTitle.value = '用户协议'
}
function onCheckPolicy() {
  agreementType.value = '2'
  agreementVisible.value = true
  agreementTitle.value = '隐私政策'
}

function onLogin() {
  formRef.value?.validate((valid) => {
    if (!valid) return
    if (!isChecked.value) {
      ElMessage({ type: 'warning', message: '请先阅读并同意 用户协议 和 隐私政策' })
      return
    }
    loginLoading.value = true
    setTimeout(() => {
      loginLoading.value = false
      router.push('/home')
    }, 1000)
  })
}
</script>

<template>
  <div class="container-box">
    <div class="login-box">
      <div class="title-box">
        <div class="title">用户登录</div>
      </div>
      <el-form ref="formRef" :model="formData" :rules="formRules" class="mt-20">
        <el-form-item label="" prop="account">
          <el-input v-model="formData.account" :prefix-icon="User" placeholder="请输入账号" style="height:40px;" />
        </el-form-item>
        <el-form-item label="" prop="password">
          <el-input v-model="formData.password" type="password" :prefix-icon="Lock" placeholder="请输入密码" style="height:40px;" />
        </el-form-item>
        <el-form-item class="mt-30">
          <el-button
            type="primary"
            :disabled="loginDisabled"
            :loading="loginLoading"
            style="width: 100%;height:40px;"
            @click="onLogin">
            登录
          </el-button>
        </el-form-item>
        <div class="agreement-box">
          <el-checkbox v-model="isChecked" label="我已阅读并同意" size="large" />
          <span class="agreement ml-10" @click="onCheckAgreement()">用户协议</span>
          <span class="ml-10">和</span>
          <span class="agreement ml-10" @click="onCheckPolicy()">隐私政策</span>
        </div>
      </el-form>
    </div>
  </div>
  <el-dialog v-model="agreementVisible" :title="agreementTitle" width="600">
    <!-- 用户协议 -->
    <UserAgreement v-show="agreementType === '1'" />
    <!-- 隐私政策 -->
    <PrivacyPolicy v-show="agreementType === '2'" />
  </el-dialog>
</template>

<style lang="scss" scoped>
@import '@/styles/variables.scss';

.container-box {
  height: 100%;
  // background: url(./../assets/login/login_bg.png) no-repeat center / 100% 100%;
  // background: linear-gradient(90deg, #2eafff 0%, #88d2ff 100%);
}
.login-box {
  position: absolute;
  top: 50%;
  right: 10%;
  transform: translateY(-50%);
  width: 400px;
  height: 500px;
  background: rgb(255, 255, 255, 1);
  padding: 80px 40px;
  border-radius: 10px;
  box-shadow: 0 1px 2px -2px #00000029, 0 3px 6px #0000001f, 0 5px 12px 4px #00000017;
}
.title-box {
  .title {
    font-size: 24px;
    font-weight: 600;
    color: #000000;
  }
}
.agreement-box {
  display: flex;
  align-items: center;
  font-size: 14px;
  color: #000000e0;
  .agreement {
    color: $menuActiveText;
    cursor: pointer;
  }
}

/* 方法1：使用 ::v-deep 深度选择器（Vue2/Vue3 通用） */
::v-deep .el-checkbox__input.is-checked + .el-checkbox__label {
  color: #000000;
}
::v-deep .el-checkbox__label {
  color: #000000;
}
</style>
